<template>
  <div class="page">
    <div class="sui-pagination">
      <ul>
        <!-- 上一页 -->
        <li class="prev" :class="{disabled: pageNo == 1}">
          <button @click="handlePageClick('prev')">«上一页</button>
        </li>

        <!-- 显示第一页 -->
        <li v-show="isShowFirstPage"><button @click="handlePageClick('first')">1</button></li>

        <!-- 如果最后一页大于连续数则显示... -->        
        <li class="dotted" v-show="isShowContinuesEndDot"><button>...</button></li>

        <!-- 遍历最后一页的数字，连续数显示的条件就是当前page>末尾页-连续页 -->
        <li :class="{active: page == pageNo}" v-for="(page, index) in pageNo && startPageAndEndPage.end" :key="index">
          <!-- {{page}} -->
          <button href="#" @click="handlePageClick('select', page)" v-if="(page > (startPageAndEndPage.end - continues))">{{page}}</button>
        </li>

        <!-- 如果当前页加上连续页的取整<总页数则显示... -->
        <li class="dotted" v-show="isShowContinuesStartDot"><button>...</button></li>
        
        <!-- 显示最后一页 -->
        <li v-show="isShowLastPage"><button @click="handlePageClick('last')">{{totalPages}}</button></li>
        
        <!-- 下一页 -->
        <li class="next" :class="{disabled: pageNo == totalPages}">
          <button @click="handlePageClick('next')">下一页»</button>
        </li>
      </ul>
      <div class="totalPages"><span>共{{totalPages}}页&nbsp;</span></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  // pageNo当前页数   totalPages总页数 total总共有多少条数据 
  // pageSize每页显示的条数  continues连续的条数
  props: ['pageNo', 'totalPages', 'total', 'pageSize', 'continues'],
  data() {
    return {};
  },
  computed: {
    // 计算开始页和结束页
    startPageAndEndPage() {
      let {pageNo, totalPages, continues} = this
      let start = 0, end = 0
      // 处理连续数大于总页数
      if(continues > totalPages) {
        start = 1
        end = totalPages
      } else {
        // 正常情况
        start = pageNo - 2
        end = pageNo + 2
        // 处理开始页小于1
        if(start < 1) {
          start = 1
          end = continues
        }
        // 处理结束页大于总页数totalPages 
        if(end > totalPages) {
          start = totalPages - continues + 1
          end = totalPages
        }
      }
      return {start, end}
    },

    // 是否显示第一页按钮
    isShowFirstPage() {
      return this.pageNo > Math.ceil(this.continues/2) && this.totalPages > this.continues
    },

    // 是否显示连续后的...
    isShowContinuesEndDot() {
      return this.startPageAndEndPage.end > this.continues && this.totalPages > this.continues
    },

    // 是否显示连续前的...
    isShowContinuesStartDot() {
      return (this.pageNo + parseInt(this.continues/2)) < this.totalPages && this.totalPages > this.continues
    },

    // 是否显示最后一页按钮
    isShowLastPage() {
      return this.pageNo < this.totalPages - Math.floor(this.continues/2) && this.totalPages > this.continues
    }
  },
  mounted() {
    // this.$nextTick(() => {console.log(this.pageNo)})27 28  29 30 31  32 
  },
  methods: {
    handlePageClick(type,page) {
      switch (type) {
        case 'prev':
          if (this.pageNo == 1) return
          this.$emit('handlePageChild', this.pageNo - 1)
          break
        case 'next':
          if (this.pageNo == this.totalPages) return
          this.$emit('handlePageChild', this.pageNo + 1)
          break
        case 'first':
          this.$emit('handlePageChild', 1)
          break
        case 'last':
          this.$emit('handlePageChild', this.totalPages)
          break    
        case 'select':
          this.$emit('handlePageChild', page)
          break 
      }
    },
  }
};
</script>

<style scoped lang="less">
.page {
  height: 66px;
  overflow: hidden;

  .sui-pagination {
    margin: 18px 0;
    display: flex;
    justify-content: center;

    ul {
      margin-left: 0;
      margin-bottom: 0;
      vertical-align: middle;
      // width: 490px;

      li {
        line-height: 18px;
        display: inline-block;

        button {
          position: relative;
          line-height: 18px;
          text-decoration: none;
          background-color: #f4f4f5;
          border: 1px solid #e0e9ee;
          margin-left: -1px;
          font-size: 14px;
          padding: 9px 18px;
          color: #333;
          margin: 0 2px;
          border-radius: 2px;
          cursor: pointer;
        }

        &.active {
          button {
            background-color: #e1251b;
            color: #fff;
            border-color: #fff;
            cursor: pointer;
          }
        }

        &.prev {
          button {
            background-color: #fafafa;
          }
        }

        // &.prev:hover {
        //   button {
        //     background-color: #e1251b;
        //     color: #fff;
        //   }
        // }

        &.disabled {
          button {
            color: #999;
            cursor: not-allowed;
          }
        }

        &.dotted {
          span {
            margin-left: -1px;
            position: relative;
            line-height: 18px;
            text-decoration: none;
            background-color: #fff;
            font-size: 14px;
            border: 0;
            padding: 9px 18px;
            color: #333;
          }
        }

        &.next {
          button {
            background-color: #fafafa;
          }
        }

        // &.next:hover {
        //   button {
        //     background-color: #e1251b;
        //     color: #fff;
        //   }
        // }
      }
    }

    .totalPages {
      color: #333;
      font-size: 14px;
      width: 160px;
      text-align: center;
      line-height: 38px;
    }
  }
}
</style>
